<template>
	<view>
		<view class="baseInfo box d-ai-c">
			<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/xing.png" mode=""></image>
			<view class="">
				基本信息
			</view>
		</view>
		<view class="baselist box d-ai-c">
			<view class="">
				姓名
			</view>
			<view class="">
				<input type="text" v-model="name" value="" placeholder="请填写您的姓名" />
			</view>
		</view>
		<view class="baselist box d-ai-c">
			<view class="">
				姓别
			</view>
			<view style="display: flex;align-items: center;font-size: 28rpx;">
				<radio-group class="box" @change="radioChange">
					<label class="box mr-2" style="width: 90rpx;" v-for="(item, index) in items" :key="item.value">
						<view class="">
							<radio color="#FF8338" :value="item.value" :checked="item.checked" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="baselist box d-ai-c">
			<view class="">
				身份证
			</view>
			<view class="">
				<input type="text" value="" v-model="idCard" placeholder="请填写您的身份证号" />
			</view>
		</view>
		<view class="baselist box d-ai-c">
			<view class="">
				手机号
			</view>
			<view class="">
				<input v-model="phone" type="text" value="" placeholder="请填写您的手机号" />
			</view>
		</view>
		<view class="baselist box d-ai-c" @tap="openmap">
			<view class="">
				地址
			</view>
			<view class="address">
				<view class="" v-if="address!=''" style="with:500rpx;">
					{{address}}
				</view>
				<view class="" v-if="address==''" style="with:500rpx; color: #999999;">
					请选择您的位置
				</view>
				<!-- <input v-model="address" type="text" value="" placeholder="请填写您的当前住址" /> -->
			</view>
		</view>
		<view class="baseInfo box d-ai-c">
			<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/xing.png" mode=""></image>
			<view class="">
				证件照片
			</view>
		</view>
		<view class="iscardphoto box d-jc-sb d-f-wrap">
			<image v-if="main==''" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/renxxiang@2x.png" mode="" @tap="Uploadahead"></image>
			<image v-if="main!=''" :src="main" mode="" @tap="Uploadahead"></image>
			<image  v-if="side==''" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/guohui@2x.png" mode="" @tap="Uploadreverse"></image>
			<image v-if="side!=''" :src="side" mode="" @tap="Uploadreverse"></image>
			<image v-if="health==''" class="mt-3" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/jiankangzheng@2x.png" mode="" @tap="healthphoto"></image>
			<image v-if="health!=''" class="mt-3" :src="health" mode="" @tap="healthphoto"></image>
		</view>
		<view class="baseInfo box d-ai-c">
			<view class="">
				上传工作照
			</view>
		</view>
		<image v-if="workImage==''" class="workphoto" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/gongzuozhao@2x.png" mode="" @tap="workphoto"></image>
		<image v-if="workImage!=''" class="workphoto" :src="workImage" mode="" @tap="workphoto"></image>
		<view class="bottom">
			<view class="btn" @tap="promise">
				提交认证
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['loginState', 'userInfo']),
		data() {
			return {
				current: 0,
				items: [{
						value: '1',
						name: '男',
						checked: true
					},
					{
						value: '2',
						name: '女',
						checked:false
					},
				
				],
				sex:1,
				idCard:'',
				name:'',
				phone:'',
				side:'',
				main:'',
				health:'',
				workImage:'',
				latitude:'',
				longitude:'',
				address:'',
			}
		},
		onLoad() {
			// this.getlocation()
		},
		methods: {
			openmap(){
				let _this = this
				uni.chooseLocation({
				    success: function (res) {
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
						_this.address = res.address
						_this.latitude = res.latitude
						_this.longitude = res.longitude
				    }
				});
			},
			radioChange: function(evt) {
				let _this = this
				_this.sex = evt.target.value
				console.log(_this.sex)
				for (let i = 0; i < _this.items.length; i++) {
					if (_this.items[i].value == evt.target.value) {
						_this.current = i;
						break;
					}
				}
			
			
			},
			//上传身份证正面
			Uploadahead() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //相册、拍摄两者都有
					success: (res)=> {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						// this.main = res.tempFilePaths[0]
						uni.uploadFile({
							url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								ContentType: "image/jpg"
							},
							formData: {
								'user': 'test'
							},
							success:(uploadFileRes)=> {
								let data = JSON.parse(uploadFileRes.data)		
								this.main = data.dataMap
							}
						});
					}
				});
			},
			// 反面
			Uploadreverse() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //相册、拍摄两者都有
					success: (res)=> {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						// this.side = res.tempFilePaths[0]
						uni.uploadFile({
							url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								ContentType: "image/jpg"
							},
							formData: {
								'user': 'test'
							},
							success:(uploadFileRes)=> {
								let data = JSON.parse(uploadFileRes.data)		
								this.side = data.dataMap
							}
						});
					}
				});
			},
			// 健康证
			healthphoto() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //相册、拍摄两者都有
					success: (res)=> {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						// this.health = res.tempFilePaths[0]
						uni.uploadFile({
							url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								ContentType: "image/jpg"
							},
							formData: {
								'user': 'test'
							},
							success:(uploadFileRes)=> {
								let data = JSON.parse(uploadFileRes.data)		
								this.health = data.dataMap
							}
						});
					}
				});
			},
			// 工作照片
			workphoto() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //相册、拍摄两者都有
					success: (res)=> {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						// this.workImage = res.tempFilePaths[0]
						uni.uploadFile({
							url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								ContentType: "image/jpg"
							},
							formData: {
								'user': 'test'
							},
							success:(uploadFileRes)=> {
								let data = JSON.parse(uploadFileRes.data)		
								this.workImage = data.dataMap
							}
						});
					}
				});
			},
			promise(){
				if(this.name == ''){
					uni.showToast({
						title: '请填写姓名',
						duration: 1000,
						icon: "none"
					});
					return
				}
				let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if(reg.test(this.idCard) === false) { 
							uni.showToast({
								title: '身份证号码不正确',
								duration: 1000,
								icon: "none"
							});
					return
				}
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '手机号填写有误',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if(this.side == ''||this.main == ''){
					uni.showToast({
						title: '请重新上传身份证',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if(this.address == ''){
					uni.showToast({
						title: '地址不能为空',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if(this.health == ''){
					uni.showToast({
						title: '请重新上传健康证',
						duration: 1000,
						icon: "none"
					});
					return
				}

				this.$api.accompanyAttestation({
					idCard:this.idCard,
					name:this.name,
					sex:this.sex,
					phone:this.phone,
					side:this.side,
					main:this.main,
					health:this.health,
					workImage:this.workImage,
					longitude:this.longitude,
					latitude:this.latitude,
					address:this.address
				}).then((res) => {
					if(res.data.success){
						uni.showToast({
							title: '提交成功，等待审核',
							duration: 500,
							icon: "none"
						});
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.showToast({
							title: res.data.message,
							duration: 500,
							icon: "none"
						});
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
.baseInfo{
	padding-top: 50rpx;
	padding-left: 17rpx;
	image{
		width: 13rpx;
		height: 12rpx;
	}
	view{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
}
.baselist{
	width: 690rpx;
	height: 100rpx;
	margin: 0 auto;
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 0rpx 0rpx #F2F7FF;
	view:nth-child(1){
		width: 150rpx;
	}
	.address{
		width: 500rpx;
		view:nth-child(1){
			width: 500rpx;
			overflow:hidden; //超出的文本隐藏
			text-overflow:ellipsis; //溢出用省略号显示
			white-space:nowrap; //溢出不换行
		}
	}
}
.iscardphoto{
	width: 690rpx;
	margin: 0 auto;
	margin-top: 30rpx;
	image{
		width: 330rpx;
		height: 208rpx;
	}
}
.workphoto{
	width: 240rpx;
	height: 300rpx;
	margin-top: 30rpx;
	margin-left: 30rpx;
	padding-bottom: 162rpx;

}
.bottom{
	width: 750rpx;
	height: 140rpx;
	// border:1rpx solid red;
	position: fixed;
	bottom:  0rpx;
	left: 0;
	background-color: #FFFFFF;
	.btn{
		width: 690rpx;
		height: 100rpx;
		font-size: 32rpx;
		background-color: #4CA6FF;
		border-radius: 10rpx;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		margin: 0 auto;
	}
}

</style>
